import React, { Component } from 'react';
import { Breadcrumb, Table, Tag, Space, PageHeader, Button, Pagination  } from 'antd';
import CheckLogin from "../../../hoc/checkLogin"
import url from "../../../config/url"
import req from "../../../http/req"


class Index extends Component {
  mbx = JSON.parse(sessionStorage.getItem("mbx"))
  state = {
    page: 1, // 默认第一页开始
    total: 0, // 总共有多少条内容
    pageSize: 10 // 一页多少条
  }
  render() {
    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        // render: text => <a>{text}</a>,
      },
      {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
      },
      {
        title: '邮箱',
        key: 'email',
        dataIndex: 'email',
        render: (text) => <a href={"mailto:" + text}>{text}</a>
      },
      {
        title: '性别',
        key: 'gender',
        dataIndex: 'gender',
        render: (text) => {
          if (text === "1") {
            return <Tag color="blue">男</Tag> 
          } else if (text === "2") {
            return <Tag color="pink">女</Tag>
          } else {
            return <Tag color="black">保密</Tag>
          }
        },
      },
      {
        title: '状态',
        key: 'status',
        dataIndex: 'status',
        render: (text) => {
          if (text === "1") {
            return <Tag color="green">正常</Tag> 
          } else {
            return <Tag color="red">禁用</Tag>
          }
        },
      },
      {
        title: '操作',
        key: 'id',
        render: (text) => (
          <Space size="middle">
            <Button>编辑</Button>
            <Button onClick={() => {
              req.delete(url.DelUser + text.id)
                .then((res) => {
                  if (res.data.errNo === 0) {
                    this.loadData(this.state.page)
                  }
                })
            }}>删除</Button>
          </Space>
        ),
      }
    ];
    let pathname = this.props.location.pathname
    let count = []
    this.mbx.forEach(item => {
      if (pathname === item.auth_path) {
        count = item.auth_bread.split(",")
      }
    })
    const menu = count.map(item => {
      return <Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>
    })
    return (
      <>
        <Breadcrumb separator=">">
          {menu}
        </Breadcrumb>
        <PageHeader
          ghost={false}
          // onBack={() => window.history.back()}
          title="用户列表"
          extra={[
            <Button key="btn_add" type="primary">
              添加用户
            </Button>
          ]}
        ></PageHeader>
        <Table scrollToFirstRowOnChange={true} scroll={{y: "400px"}} rowKey={record => record.id} columns={columns} dataSource={this.state.data} pagination={false}/>
        <div style={{ marginTop: "20px", textAlign: "center" }}>
          <Pagination defaultCurrent={this.state.page} total={this.state.total} onChange={this.loadData.bind(this)} />
        </div>
      </>
    );
  }

  componentDidMount () {
    this.loadData(this.state.page)
  }

  loadData = (page) => {
    req.get(url.GetUserlist, {
      params: {
        page
      },
    })
    .then(res => {
      if (res.data.errNo === 0) {
        this.setState({
          data: res.data.paginate.data,
          total: res.data.paginate.total,
          page: page
        })
      }
    })
  }
}

export default CheckLogin(Index);
